<template>
    <div class="bigbox">
        <div class="common-layout">
            <el-container>
                <el-aside>
                    <!-- 使用期限 -->
                    <div class="serviceLife">
                        <el-card class="box-card">
                            <div class="text item">
                                <h3 class="inline">使用倒计时：</h3>
                                <h3 class="inline datatime">
                                    <span>{{year}}</span>年 :
                                    <span>{{month}}</span>月:
                                    <span>{{day}}</span>天
                                </h3>
                            </div>
                        </el-card>
                    </div>
                    <!-- 退用申请 -->
                    <div class="withdrawalApplication">
                        <el-empty description="退款功能正在开发....." />
                    </div>
                </el-aside>
                <el-main>
                    <!-- 续费 -->
                    <div class="renewal">
                        <el-col class="renewal_one">
                            <el-col class="re-cicle" @click="payFor(200,'1年使用期')">1年(￥200)</el-col>
                            <el-col class="re-cicle" @click="payFor(390,'2年使用期')">2年(￥390)</el-col>
                            <el-col class="re-cicle" @click="payFor(570,'3年使用期')">3年(9.5折)</el-col>
                            <el-col class="re-cicle" @click="payFor(800,'5年使用期')">5年(8折)</el-col>
                        </el-col>

                    </div>
                </el-main>
            </el-container>
        </div>
    </div>
</template>

<script>
    import { v4 as uuidv4 } from 'uuid';
    import dayjs from 'dayjs'
    import Calendar from '@element-plus/icons-vue'
    export default {
        name: 'YaodaoPay',

        data() {
            return {
                subject: "",
                traceNo: "",
                totalAmount: '',
                day: '',
                year: '',
                month: '',
                value: 24

            };
        },

        mounted() {

        },

        methods: {
            payFor(price, subject) {
                var traceNo = uuidv4();
                console.log(traceNo);
                var that = this;
                var url = "http://localhost:2021/alipay/pay?title=" + subject + "&tranceNo=" + traceNo + "&payPrice=" + price;
                that.$http.get(url)
                    .then((res) => {
                        window.open("http://localhost:2021/alipay/pay?title=" + subject + "&tranceNo=" + traceNo + "&payPrice=" + price)
                    })
                    .catch((err) => {
                    })
            },
            getAloneTime() {
                let that = this;
                var formatTime = 0;
                that.$http.get('alipay/getPay')
                    .then(function (response) {
                        console.log(response, "原始数据");
                        if (response) {
                            that.year = response.payVOList[0].endYear;
                            that.month = response.payVOList[0].endMonth > 10 ? response.payVOList[0].endYear : '0' + response.payVOList[0].endYear;
                            that.day = response.payVOList[0].endDay > 10 ? response.payVOList[0].endDay : '0' + response.payVOList[0].endDay;
                        }

                    })
                    .catch(function (error) {
                        console.log(error, "error");
                    })
            },

        },
        created() {
            this.getAloneTime();
        }
    };
</script>

<style lang="scss" scoped>
    .el-col {
        text-align: center;
    }

    .countdown-footer {
        margin-top: 8px;
    }

    .el-empty {
        height: 100%;
    }

    .el-card {
        height: 100%;
    }

    .bigbox {
        height: 100%;
    }

    .el-container {
        display: flex;
    }

    .renewal_one {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .renewal_one .re-cicle {
        flex: 1;
    }

    .el-main {
        padding: 0;
        flex: 1;

    }

    .datatime span {
        display: inline-block;
        width: 20px;
        height: 30px;
        background-color: #d1edc4;
        text-align: center;
        line-height: 30px;
        color: #2c8701;
        border-radius: 5px;
        margin-right: 3px;
    }

    .el-aside {
        height: 100% !important;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .el-aside div:first-child {
        flex: 1;
    }

    .el-aside div:last-child {
        flex: 3;
    }

    .el-card {
        position: relative;

        .but {
            position: absolute;
            bottom: 30px;
        }
    }

    .re-card {
        h2 {
            margin-bottom: 20px;
        }
    }

    .withdrawalApplication {
        background-color: #fff;
        margin-top: 20px;
        height: 460px;
        padding: 20px;
        position: relative;

        h3 {
            margin-bottom: 40px;
        }

        p {
            margin-bottom: 30px;

        }

        .el-row {
            position: absolute;
            bottom: 20px;
        }
    }

    .renewal {
        width: 90%;
        height: 100%;
        margin-left: 20px;
        overflow: hidden;

        .el-card {
            height: 200px;
        }

        .re-cicle {
            width: 80%;
            height: 120px;
            background-color: #fff;
            text-align: center;
            line-height: 120px;
            font-size: 20px;
            font-family: "微软雅黑";
            cursor: pointer;
            display: block;
            color: #5B6BE8;
            border-radius: 20px;
            font-weight: 600;
            box-shadow: 0 0 4px #c8cefc;
            margin: 35px 0 0 90px;
        }

        .re-cicle:nth-child(1) {
            margin-top: 3px;
        }
    }



    .el-aside {
        width: 50%;
        height: 200px;

        .text {
            font-size: 14px;
        }

        .item {
            padding: 18px 0;
        }

        .box-card {
            width: 100%;
        }
    }

    .inline {
        display: inline-block;
    }

    .inline:last-child {
        margin-left: 20px;
    }
</style>